<template>
  <div>
    <div class="chart-container" ref="chart"></div>
    <el-card class="box-card">
            <el-cascader
                placeholder="请选择班级"
                :options="classOptions"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"></el-cascader>
      <el-button type="primary" @click="exportScore">成绩导出</el-button>
    </el-card >
  </div>
</template>

<script>
import * as echarts from 'echarts';
import classes from '@/api/cms/classes'  
import examScores from '@/api/cms/examScores';

export default {
  data() {
    return {
      chartData: {},
      params: {},
      classOptions: undefined
    };
  },
  mounted() {
    this.getData();
    classes.getCascaderClass().then(res=>{
            console.log(res)
            this.classOptions = res.data.content
        }).catch(err=>{
            console.log(err)
        })
  },
  methods: {
    // 绘制图表
    drawChart() {
      const chartElement = this.$refs.chart;
      const chart = echarts.init(chartElement);

      const option = {
        color: ['#3398DB'],
        title: {
          text: '课程平均分和总人数图表'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.chartData.courseNames,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '总人数',
            axisLabel: {
              formatter: '{value} 人'
            }
          },
          {
            type: 'value',
            name: '平均分',
            axisLabel: {
              formatter: '{value} 分'
            }
          }
        ],
        series: [
          {
            name: '总人数',
            type: 'bar',
            barWidth: '60%',
            data: this.chartData.totalStudents
          },
          {
            name: '平均分',
            type: 'line',
            yAxisIndex: 1,
            data: this.chartData.averageScores
          }
        ]
      };

      chart.setOption(option);
    },
    getData() {
      examScores.scoreStatistics()
        .then((res) => {
          this.chartData = res.data.result;
          this.drawChart(); // 在获取数据后绘制图表
        })
        .catch((err) => {
          this.$message.error('获取数据失败');
        });
    },
    handleChange(value) {      
        this.params.classesId = value[1];
    },
    exportScore() {
      if(!this.params.classesId){
        this.$message.warning('请选择班级')
        return;
      }
      // examScores.exportScore(this.params).then(res=>{
      //     console.log(res)
      //     debugger;
      //     const downloadUrl = window.URL.createObjectURL(new Blob([response.data]));
      //     debugger;
      //     const link = document.createElement('a');
      //     link.href = downloadUrl;
      //     link.setAttribute('download', 'students_data.xlsx'); // 下载文件的名称
      //     document.body.appendChild(link);
      //     link.click();
      //     link.remove();
      // }).catch(error => {
      //   console.error('导出数据失败:', error);
      // });
        const downloadUrl = `${process.env.BASE_API}/cmsservice/exam-scores/exportScores?classesId=${this.params.classesId}`;
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.setAttribute('download', 'students_data.xlsx'); // 下载文件的名称
        document.body.appendChild(link);
        link.click();
        link.remove();
    }
  }
};
</script>

<style scoped>
.chart-container {
  margin: 30px 0 0 10px;
  width: 100%;
  height: 400px;
}
</style>
